<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使页面在移动设备上正确显示 -->
    <title>支付成功</title> <!-- 页面标题 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap CSS文件 -->
    <!-- 自定义样式 -->
    <style>
        /* 重置body的默认样式 */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif; /* 更改字体 */
            background-color: #f4f4f9; /* 更改背景颜色 */
            margin: 0; /* 移除默认边距 */
            padding: 0; /* 移除默认填充 */
        }

        /* 导航链接的样式 */
        .nav-link {
            border: 1px solid #cfcfcf; /* 更改导航链接边框颜色 */
            margin: 0 10px; /* 增加外边距 */
            padding: 7px 20px; /* 增加内边距 */
            text-decoration: none; /* 去除下划线 */
            color: #4a4a4a; /* 更改文字颜色 */
            font-weight: bold; /* 加粗文字 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .nav-link:hover {
            background-color: #eaeaea; /* 导航链接悬停时的背景颜色 */
        }

        /* 成功消息容器的样式 */
        .success-message {
            background-color: #fff; /* 更改背景颜色 */
            padding: 30px; /* 增加内边距 */
            border-radius: 10px; /* 圆角边框 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            margin-top: 40px; /* 增加顶部外边距 */
        }

        /* 卡信息容器的样式 */
        .card-info {
            display: flex; /* 使用Flex布局 */
            align-items: center; /* 垂直居中对齐 */
            margin-top: 30px; /* 增加顶部外边距 */
        }

        /* 卡图片的样式 */
        .card-image {
            width: 60px; /* 设置图片宽度 */
            height: auto; /* 图片高度自适应 */
            margin-right: 20px; /* 增加右边距 */
        }

        /* 标题样式 */
        h2, h3 {
            color: #333; /* 更改标题颜色 */
        }

        /* 段落样式 */
        p {
            color: #555; /* 更改段落颜色 */
        }

        /* 分隔线样式 */
        hr {
            border: 1px solid #ddd; /* 更改分隔线颜色 */
            margin: 20px 0; /* 增加上下外边距 */
        }
    </style>
</head>
<body>
    <div class="container mt-4"> <!-- 容器，设置顶部外边距 -->
        <header class="d-flex justify-content-between align-items-center mb-4"> <!-- 页眉，使用Flex布局 -->
            <img src="images/logo.png" alt="Bookshop Logo" class="me-2" width="100"> <!-- 书店标志图片 -->
            <h1 class="text-center flex-grow-1">我的书店</h1> <!-- 书店名称 -->
        </header>
        <nav class="d-flex justify-content-center mb-4"> <!-- 导航栏，使用Flex布局 -->
            <a href="index.html" class="nav-link">主页</a> <!-- 导航链接 -->
            <a href="#" class="nav-link">关于我们</a> <!-- 导航链接 -->
            <a href="#" class="nav-link">联系我们</a> <!-- 导航链接 -->
        </nav>

        <div class="success-message"> <!-- 成功消息容器 -->
            <h2>您已成功输入您的信用卡详细信息</h2> <!-- 成功消息标题 -->
            <hr> <!-- 分隔线 -->
            <div class="card-info"> <!-- 卡信息容器 -->
                <img src="images/logo.png" alt="Credit Card Icon" class="card-image"> <!-- 卡图标 -->
                <div>
                    <h3>借记卡/信用卡</h3> <!-- 卡类型标题 -->
                    <p>您的信用卡号码结尾<span id="lastFourDigits"></span></p> <!-- 卡号后四位 -->
                </div>
            </div>
            <div id="purchaseInfo" class="mt-3"></div> <!-- 购买信息容器 -->
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!-- 引入Bootstrap JS文件 -->
    <script>
        // 获取URL参数
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        };

        var lastFourDigits = getUrlParameter('lastFour'); // 获取卡号后四位
        var bookTitle = getUrlParameter('book'); // 获取书名
        var bookPrice = getUrlParameter('price'); // 获取书价

        // 显示卡号后四位
        document.getElementById('lastFourDigits').textContent = 
            lastFourDigits ? '**** **** **** ' + lastFourDigits : '**** **** **** ****';

        // 显示购买信息
        if (bookTitle && bookPrice) {
            document.getElementById('purchaseInfo').innerHTML = 
                `<p>您已成功购买"${bookTitle}"，价格为$${bookPrice}。</p>`;
        }
    </script>
</body>
</html>